<%@ include file="/WEB-INF/views/common/includes.jsp"%>
<head>
<script type="text/javascript">

function isNumberKey(evt){
	    var charCode = (evt.which) ? evt.which : evt.keyCode
	    return !(charCode > 31 && (charCode < 48 || charCode > 57));
	}

</script>
</head>
<body>
	<c:if test="${not empty param.success}">
		<div class="alert alert-success">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-ok-sign"></i> You successfully added an <strong> Ingredient!</strong>
		</div>
	</c:if>
	<section class="panel">
		<div class="panel-heading" style="padding:8px 10px">
			<b>NEW INGREDIENT</b>
		</div>
			<div class="panel-body">
			<form method="post" action="saveIngredient" enctype="multipart/form-data">
				<div class="row" style="margin-bottom:20px;margin-left:5px">
					<div class="form group">
						<label class="control-label">Ingredient Name</label> 
							<input type="text" class="form-control" name="ingredientname" style="width: 30%;" value=<c:if test="${not empty ingredientName}"> 	
							<c:out value="${ingredientName}"/> </c:if>>
					</div>
				</div>
				<div class="row" style="margin-bottom:20px">
					<div class="col-lg-8">
						<label class="control-label">Description</label>
						<textarea class="form-control" name="ingredientDescription" rows="10" cols="40"><c:out value="${ingredientDescription}" />
						</textarea>
					</div>
				</div>
				<div class="row" style="margin-bottom:20px">
					<div class="col-lg-6">
						<div class="form group">
						<label class="control-label">Carbs</label> 
							<input type="number" class="form-control" name="carbs" onkeypress="return isNumberKey(event);" style="width: 50%;"> 	
							
						</div>
					</div>
						
					<div class="col-lg-6">
						<div class="form group">
						<label class="control-label">Calorie</label> 
							<input type="number" class="form-control" name="calory" onkeypress="return isNumberKey(event);" style="width: 50%;"> 	
							
						</div>
					</div>
				</div>
				<div class="row" style="margin-bottom:20px">
					<div class="col-lg-6">
						<div class="form group">
						<label class="control-label">Protein</label> 
						<input type="number" class="form-control" name="protein" onkeypress="return isNumberKey(event);" style="width: 50%;"> 		
						</div>
					</div>
					<div class="col-lg-6">
						<div class="form group">
						<label class="control-label">Fat</label> 
						<input type="number" class="form-control" name="fat" onkeypress="return isNumberKey(event);" style="width: 50%;"> 		
						</div>
					</div>
				</div>
				<div class="row" style="margin-bottom:20px">
					<div class="col-lg-8"></div>
					<div class="col-lg-4 text-right">
						 <input type="submit" class="btn btn-primary" value="Save Ingredient" />
					</div>
				</div>
				<c:if test="${not empty param.IngredientId}">
				<input type="hidden" value="${param.IngredientId}" name="ingredientId" />
				</c:if>
			</form>
			</div>
	</section>
</body>
</html>